<template>
  <div>
  <!-- 打印层在最顶层 -->
  <print-template
    v-if="printVisible"
    :items="selected"
    @close="printVisible = false"
  />

  <!-- 主页面，打印时加毛玻璃 -->
  <div :class="{ blurred: printVisible }" style="margin: 50px 16px 16px 16px;">
    <!-- 查询条件 -->
    <el-form
      inline
      label-width="100px"
      class="compact-form"
    >

      <!-- 第二行 -->
      <el-form-item label="检验日期起">
        <el-date-picker
          v-model="query.inspectionDateStart"
          type="date"
          placeholder="开始日期"
          class="input-short"
        />
      </el-form-item>

      <el-form-item label="检验日期止">
        <el-date-picker
          v-model="query.inspectionDateEnd"
          type="date"
          placeholder="结束日期"
          class="input-short"
        />
      </el-form-item>

      <el-form-item label="生产日期起">
        <el-date-picker
          v-model="query.produceDateStart"
          type="date"
          placeholder="开始日期"
          class="input-short"
        />
      </el-form-item>

      <el-form-item label="生产日期止">
        <el-date-picker
          v-model="query.produceDateEnd"
          type="date"
          placeholder="结束日期"
          class="input-short"
        />
      </el-form-item>

      <!-- 强制换行 -->
      <br />

      <!-- 第一行 -->
      <el-form-item label="批号">
        <el-input v-model="query.batchNo" clearable class="input-short" />
      </el-form-item>

      <el-form-item label="业务类型">
        <el-select v-model="query.bizType" clearable class="input-short">
          <el-option label="来料检验" value="ARR" />
          <el-option label="生产检验" value="PRO" />
          <el-option label="委外检验" value="SUB" />
        </el-select>
      </el-form-item>

      <el-form-item label="供应商">
        <el-input v-model="query.vendorName" clearable class="input-short" />
      </el-form-item>

      <!-- 按钮 -->
      <el-form-item label=" ">
        <el-button type="primary" @click="fetchData">查询</el-button>
        <el-button type="success" @click="handlePrint">打印所选</el-button>
      </el-form-item>
    </el-form>

    <!-- 数据表 -->
    <el-table
      ref="table"
      :data="tableData"
      border
      stripe
      height="600"
      style="width: 100%"
      row-key="单据条码"
      @selection-change="handleSelection"
    >
      <el-table-column type="selection" :reserve-selection="true" width="50" />
      <el-table-column prop="单据条码" label="单据条码" width="200" show-overflow-tooltip />
      <el-table-column prop="检验单号" label="检验单号" width="120" show-overflow-tooltip />
      <el-table-column
        prop="业务类型"
        label="业务类型"
        width="90"
        show-overflow-tooltip
        :formatter="bizFmt"
      />
      <el-table-column prop="存货编码" label="存货编码" width="100" show-overflow-tooltip />
      <el-table-column prop="存货名称" label="存货名称" width="280" show-overflow-tooltip />
      <el-table-column prop="规格型号" label="规格型号" width="280" show-overflow-tooltip />
      <el-table-column prop="品牌" label="品牌" width="150" show-overflow-tooltip />
      <el-table-column prop="计量单位" label="计量单位" width="90" show-overflow-tooltip />
      <el-table-column prop="供应商名称" label="供应商名称" width="200" show-overflow-tooltip />
      <el-table-column prop="批号" label="批号" width="200" show-overflow-tooltip />
      <el-table-column prop="检验日期" label="检验日期" width="120" show-overflow-tooltip />
      <el-table-column prop="生产日期" label="生产日期" width="120" show-overflow-tooltip />
      <el-table-column prop="合格数量" label="合格数量" width="90" show-overflow-tooltip />
      <el-table-column prop="不良数量" label="不良数量" width="90" show-overflow-tooltip />
      <el-table-column label="扫描状态" width="100" align="center">
        <template #default="{ row }">
          <el-tag :type="row.isScanned ? 'success' : 'info'">
            {{ row.isScanned ? '已扫描' : '未扫描' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="demo-pagination-block">
      <div class="demonstration">共 {{ total }} 条记录</div>
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[20, 50, 100, 200]"
        size="default"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import axios from 'axios'
import PrintTemplate from './components/PrintTemplate.vue'
import { ElMessage } from 'element-plus'

/* 响应式数据 */
const tableData = ref([])
const selected = ref([])
const currentPage = ref(1)
const pageSize = ref(20)
const total = ref(0)
const printVisible = ref(false)

const query = reactive({
  inspectionDateStart: '',
  inspectionDateEnd: '',
  produceDateStart: '',
  produceDateEnd: '',
  batchNo: '',
  bizType: '',
  vendorName: ''
})

/* 方法 */
function bizFmt(row, column, cellValue) {
  const map = { ARR: '来料检验', PRO: '生产检验', SUB: '委外检验' }
  return map[cellValue] || cellValue
}

/* 染色 */
function rowClassName({ row }) {
  return row.isScanned ? 'scanned-row' : '';
}

function handleSelection(rows) {
  selected.value = rows
}

async function fetchData() {
  try {
    const res = await axios.post('/query', {
      page: currentPage.value,
      size: pageSize.value,
      ...query
    })
    tableData.value = res.data.list
    total.value = res.data.total
  } catch (e) {
    ElMessage.error('查询失败')
  }
}
fetchData()

async function handlePrint() {
  if (!selected.value.length) {
    ElMessage.warning('请先勾选要打印的行');
    return;
  }

  try {
    const codes = selected.value.map(r => r['单据条码']);
    await axios.post('/markScanned', { barcodes: codes });
    await fetchData();
  } catch (e) {
    ElMessage.error('标记扫描失败，但仍可打印');
  } finally {
    printVisible.value = true; 
  }
}

function handleSizeChange(val) {
  pageSize.value = val
  fetchData()
}
function handleCurrentChange(val) {
  currentPage.value = val
  fetchData()
}
</script>

<style scoped>
/* 打印毛玻璃 */
.blurred {
  filter: blur(4px) brightness(0.9);
  pointer-events: none;
}

/* 分页条 */
.demo-pagination-block {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.demo-pagination-block .demonstration {
  margin-right: 16px;
  font-size: 14px;
  color: #606266;
}

/* 统一输入控件宽度 */
.input-short {
  width: 180px;
}

/* 可选：让表单项间距更紧凑 */
.compact-form .el-form-item {
  margin-right: 16px;
}

/* 文字颜色统一（按需保留） */
body,
.el-form-item__label,
.el-input__inner,
.el-select-dropdown__item,
.el-table,
.el-pagination {
  color: #303133 !important;
}

/* 放在 scoped 样式里即可 */
:deep(.input-short.el-date-editor) {
  width: 180px !important;   /* 把组件默认 220px 强行覆盖 */
}

</style>